基于Vue & SVG 的 icon 解决方案

项目中图标的解决方案

一般项目中的图标解决方案有如下几种:

• 设计师 提供 png 格式的图标;
• 没有设计师提供图标, 需要我们自己从 iconfont 上面找图标. 比如在做一些 CMS后台的时候.

自己找图标的一般步骤

1. 打开 iconfont, 查找需要的图标, 点击 加入购物车按钮.
2. 把所有 加入购物车 的图标形成一个 项目.
3. 下载项目
4. 在自己的项目中引入 iconfont.css, 以及放置下载下来的资源文件.

这种方式存在的问题:

• 需要新增图标的时候, 就蛮麻烦.
• 然后可能项目 A 使用到了图标 12345, 项目 B 使用到了图标 123. 此时如果项目 B 直接使用

A 项目的图标资源(因为懒啊), 就会导致 45 没有用到但是也加载了.

进一步的解决方案

每次都只下载一个 svg 文件下来.
这样不会造成图标冗余. 然后也不需要去重新下载项目.

通过这种方式下载下来的 svg 文件, 我们有几种方式引入:

• 通过 img src="xx.svg" 的方式引入.//这样方式不能修改 svg 的颜色.
• 直接在 html 里面放 svg ? //太繁琐.
• 通过 <use> 的方式引入, 允许我们通过 css 修改颜色, 但是也有问题:

要求我们将所有的 SVG 图标合并成一个文件.
合并是一件事情, 合并之后, 就不能支持: 提前提供1000个图标, 在打包的时候只打包被使用到的.

期望的使用方式

通过这种方式引入:

import Icon from 'wc-svg-icon';
Vue.use(Icon);

在需要使用图标的时候:

<icon name="eye"/>
或者
<icon-eye/>

能不能实现? 能!

wc-svg-icon

基于 Vue & SVG 的 icon 解决方案

Install

npm i wc-svg-icon --save-dev

// main.js
import Icon from 'wc-svg-icon';
import 'wc-svg-icon/style.css';
Vue.use(Icon);

备注: style.css 不强制要求引入, 不引入也可以正常运行, 只是 animation 参数无效.

Usage

<icon name="xxxx"/>

这里的 'xxxx' 是你给定的 SVG 图标的名称. 比如说你现在有 10 个 SVG 图标, 你需要做的事情是:
1. 在 node_modules 里面找到 wc-svg-icon 目录
2. 把这 10个图标, 拷贝到 wc-svg-icon 目录中.

Config

icon 组件接受以下 props 配置选项:

name:    图标的名称, 需要和 SVG 名相同, 不需要带路径.比如:
<icon name="hello"/>

fill:    SVG 图标的 fill 颜色, 默认会使用 SVG 原本的颜色, 如果你传递了 fill 属性, 则会使用你所传递的.比如:
<icon name="hello" fill="red"/> // 此时图标会呈现 red 色. 

height:    控制 SVG 图标的高度
width:    控制 SVG 图标的宽度

当然你也可以通过为 <icon> 添加 class 的方式来设置 SVG 的样式. 
<icon class="foo"/>
之所以把 fill, height, width 单独提出来是因为这些对我而言经常用到.

animation:    设置图标的动画效果, 比如:
<icon animation="rotate"/>
... 当前只支持一种效果, 就是 rotate(旋转).
其实这个玩意有点鸡肋, 建议如果需要 animation 效果的同学, 可以直接自己写 animation 或者引入 animate.css
然后这样:
<icon class="animated bounce"/>

一些问题

后续会不断的添加一些默认的 SVG icon, 由于打包的时候没有引入的icon 不会打包进项目, 所以icon的个数
不会影响到打包的体积大小.

如果你是希望将本项目直接拷贝到自己的项目中使用

• 拷贝 src/wc-svg-icon 目录
• 安装 xml-loader 依赖:

npm i xml-loader --save-dev

• 所有的图标放在 wc-svg-icon/icons 下即可.

项目地址

wc-svg-icon